<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ padding:0 margin:0}
#div div{display:none; width:300px; height:300px; background:yellow;}
</style>
<script type="text/javascript">
/*
window.onload=function(){
	var oBtn=document.getElementById('a');
	var oUl=document.getElementById('ul');
	var aLi=oUl.getElementsByTagName('li');
	var oDiv=document.getElementById('div');
	var aDiv=oDiv.getElementsByTagName('div');
		
	oBtn.onmouseover=function(){
		oUl.style.display='block'
	}
	oUl.onmouseout=function(){
		oUl.style.display='none'
	}
	for(var i=0;i<aLi.length;i++){
		aLi[i].index=i
		aDiv[i].index=i
		aLi[i].onmouseover=function(){
			tabShow(this.index,aDiv,oUl)	
		}
		aDiv[i].onmouseover=function(){
			tabShow(this.index,aDiv,oUl)
		}
		aDiv[i].onmouseout=aLi[i].onmouseout=function(){
			tabDis(aDiv,oUl)
		}	
	}	
}
	function tabShow(index,aDiv,oUl){
		for(i=0;i<aDiv.length;i++){
			aDiv[i].style.display='none'
		}
	    aDiv[index].style.display='block'
		oUl.style.display='block'
	}
	
	
	function tabDis(aDiv,oUl){
		for(i=0;i<aDiv.length;i++){
			aDiv[i].style.display='none'
		}
		oUl.style.display='none'
	}
*/
	window.onload=function(){
		var navAll = document.getElementById("a");
		var level01 = document.getElementById("ul");//一级菜单
		var level02 = document.getElementById("div");//二级菜单
		var lis = level01.children;
		var divs = level02.children;
		
		level01.onmouseover = function(){
			this.style.display = "block";
		}
		
		navAll.onmouseover = function(){
			level01.style.display = "block";
		}

		for(var i=0; i<lis.length; i++){
			lis[i].index = i;
			lis[i].onmouseover = function(){
				level02.style.display = "block";
				for(var j=0; j<divs.length; j++){
					divs[j].style.display = "none";
				}
				divs[this.index].style.display = "block";
			}
		}
		
		for(var i=0; i<divs.length; i++){
			divs[i].onmouseout = function(){
				level01.style.display = "none";
				level02.style.display = "none";
			}
		}
	}
	
</script>
</head>

<body>
	<a href="#" id="a" style="display:block; width:100px; background:red;">全部商品</a>

	<ul id="ul" style="width:100px; height:300px; padding:0; margin:0; background:green;float:left; display:none;">
		<li>一级菜单A</li>
		<li>一级菜单B</li>
		<li>一级菜单C</li>
	</ul>
	<div id="div" style="float:left;">
		<div>二级AAAA</div>
		<div>二级BBBB</div>
		<div>二级CCCC</div>
	</div>
</body>
</html>













